<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="进行中任务" name="1">
      <UpComing ref="UpComing"></UpComing>
      </el-tab-pane>
    <el-tab-pane label="未完成任务" name="2">
      <RunningList ref="RunningList"></RunningList>
      </el-tab-pane>
    <el-tab-pane label="已完成任务" name="3">
      <HistoryList ref="HistoryList"></HistoryList>
      </el-tab-pane>
  </el-tabs>
</template>
<script>
  import UpComing from './upcoming.vue'
  import RunningList from './RunningList.vue'
  import HistoryList from './HistoryList.vue'
  export default {
    data () {
      return {
        activeName: '1'
      }
    },
    components: {
    UpComing,
    RunningList,
    HistoryList
    },
    methods: {
      handleClick (tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>
